<template>
	<view class="customerService">
		<view class="text-size-s text-weight-b zdy-title">猜你想问</view>
		<view class="button-box1">
			<tm-button @click="goDetail()" font-size="26" text theme="white" width="320rpx">预订流程</tm-button>
			<tm-button font-size="26" text theme="white" width="320rpx">免押金租车服务</tm-button>
			<tm-button font-size="26" text theme="white" width="320rpx">客户信息变更</tm-button>
			<tm-button font-size="26" text theme="white" width="320rpx">预付订单规则</tm-button>
		</view>
		<view class="py-12"></view>
		<view class="button-box2">
			<tm-button plan theme="bg-gradient-orange-accent" :round="24" width="220rpx">拨打客服电话</tm-button>
			<tm-button theme="bg-gradient-orange-accent" :round="24" width="420rpx" @click='concatSrivice'>联系在线客服</tm-button>
		</view>
		<view class="py-12"></view>
		<view class="title-search">
			<view class="title-left">
				<tm-tabs bg-color="#f4f4f4" color="bg-gradient-orange-accent" align="left" v-model="activeIndex0" :list="list" range-key="title"></tm-tabs>
			</view>
			<view class="search-right"><tm-button font-size="26" text theme="white" width="220rpx" :round="24" icon="icon-search">搜一搜</tm-button></view>
		</view>
		<view class="py-12"></view>
		<view class="question-box">
			<!-- 1.基本租车规则 -->
			<tm-listitem
				group
				margin="0"
				shadow="0"
				bg-color="#fffff"
				class="text-weight-b"
				font-size="28"
				title="基本租车规则"
				label="预定流程、修改订单、取车流程、车辆使用、车辆归还、服务完成、取消预订"
			>
				<template v-slot:group>
					<tm-listitem
						margin="0"
						v-for="(item, index) in listData1"
						:key="index"
						shadow="0"
						bg-color="#f4f4f4"
						class="text-weight-n"
						font-size="24"
						:title="item"
					></tm-listitem>
				</template>
			</tm-listitem>
			<!-- 2.预付订单 -->
			<tm-listitem group margin="0" shadow="0" bg-color="#fffff" class="text-weight-b" font-size="28" title="预付订单" label="预付订单规则">
				<template v-slot:group>
					<tm-listitem
						margin="0"
						v-for="(item, index) in listData2"
						:key="index"
						shadow="0"
						bg-color="#f4f4f4"
						class="text-weight-n"
						font-size="24"
						:title="item"
					></tm-listitem>
				</template>
			</tm-listitem>
			<!-- 3.注册登录 -->
			<tm-listitem group margin="0" shadow="0" bg-color="#fffff" class="text-weight-b" font-size="28" title="注册登录" label="会员注册、找回密码、修改密码、注销账户">
				<template v-slot:group>
					<tm-listitem
						margin="0"
						v-for="(item, index) in listData3"
						:key="index"
						shadow="0"
						bg-color="#f4f4f4"
						class="text-weight-n"
						font-size="24"
						:title="item"
					></tm-listitem>
				</template>
			</tm-listitem>
			<!-- 4.事故处理 -->
			<tm-listitem group margin="0" shadow="0" bg-color="#fffff" class="text-weight-b" font-size="28" title="事故处理" label="事故处理、车辆事故处理指引">
				<template v-slot:group>
					<tm-listitem
						margin="0"
						v-for="(item, index) in listData4"
						:key="index"
						shadow="0"
						bg-color="#f4f4f4"
						class="text-weight-n"
						font-size="24"
						:title="item"
					></tm-listitem>
				</template>
			</tm-listitem>
			<!-- 5.其他费用 -->
			<tm-listitem group margin="0" shadow="0" bg-color="#fffff" class="text-weight-b" font-size="28" title="其他费用" label="车辆押金、信用卡托收">
				<template v-slot:group>
					<tm-listitem
						margin="0"
						v-for="(item, index) in listData5"
						:key="index"
						shadow="0"
						bg-color="#f4f4f4"
						class="text-weight-n"
						font-size="24"
						:title="item"
					></tm-listitem>
				</template>
			</tm-listitem>
			<!-- 6.芝麻信用 -->
			<tm-listitem group margin="0" shadow="0" bg-color="#fffff" class="text-weight-b" font-size="28" title="芝麻信用" label="免押金租车服务、详细规则">
				<template v-slot:group>
					<tm-listitem
						margin="0"
						v-for="(item, index) in listData6"
						:key="index"
						shadow="0"
						bg-color="#f4f4f4"
						class="text-weight-n"
						font-size="24"
						:title="item"
					></tm-listitem>
				</template>
			</tm-listitem>
			<!-- 7.友情提示 -->
			<tm-listitem group margin="0" shadow="0" bg-color="#fffff" class="text-weight-b" font-size="28" title="友情提示" label="客服热线、投诉">
				<template v-slot:group>
					<tm-listitem
						margin="0"
						v-for="(item, index) in listData7"
						:key="index"
						shadow="0"
						bg-color="#f4f4f4"
						class="text-weight-n"
						font-size="24"
						:title="item"
					></tm-listitem>
				</template>
			</tm-listitem>
			<!-- 8.会员 -->
			<tm-listitem group margin="0" shadow="0" bg-color="#fffff" class="text-weight-b" font-size="28" title="会员" label="会员充值规则、充值账户退款">
				<template v-slot:group>
					<tm-listitem
						margin="0"
						v-for="(item, index) in listData8"
						:key="index"
						shadow="0"
						bg-color="#f4f4f4"
						class="text-weight-n"
						font-size="24"
						:title="item"
					></tm-listitem>
				</template>
			</tm-listitem>
		</view>
		<view class="my_bottom">
			<span>客服热线:</span>
			888-888-3553
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			checked: false,
			activeIndex: 0,
			list: ['国内自驾'],
			// 基本租车规则
			listData1: ['预定流程', '修改订单', '取车流程', '车辆使用', '车辆归还', '服务完成', '取消预订'],
			//预付订单
			listData2: ['预付订单规则'],
			//注册登录
			listData3: ['会员注册', '找回密码', '修改密码', '注销账户'],
			// 事故处理
			listData4: ['事故处理', '车辆事故处理指引'],
			// 其他费用
			listData5: ['车辆押金', '信用卡托收', '超期租赁'],
			// 芝麻信用
			listData6: ['免押金租车服务', '详细规则'],
			// 友情提示
			listData7: ['客服热线', '投诉', '新用户'],
			// 会员
			listData8: ['会员充值规则', '充值账户退款']
		};
	},
	onLoad() {
		//
	},
	methods: {
		goDetail(){
			uni.navigateTo({
			    url: '/pages/customerService/serviceDetailes/detail?id=11'   
			});
		},
		concatSrivice(){
			uni.navigateTo({
				url:'/pages/onlineservice/onlineservice'
			})
		}

	}
};
</script>

<style lang="scss" scoped>
.customerService {
	background-color: white;
	width: 100%;
	.zdy-title {
		margin: 0 0 10rpx 10rpx;
		padding-top: 10rpx;
		font-size: 28rpx;
	}
	.button-box1 {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.button-box2 {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.title-search {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		.title-left {
			width: 50%;
		}
		.serach-right {
			width: 50%;
		}
	}
	.my_bottom {
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		font-size: $uni-font-size-sm;
		text-align: center;
		color: #5bb3b5;
		span {
			color: #8c8c8c;
		}
	}
}
</style>
